<template>
  <div class="policy-wrap">
    <el-tabs tab-position="left" class="demo-tabs">
      <el-tab-pane label="服务隐私协议">
        <div class="inner-wrap">
          <UserPolicyView/>
        </div>
      </el-tab-pane>
      <el-tab-pane label="JIM免责声明">
        <div class="inner-wrap">
          <DutyPolicyView/>
        </div>
      </el-tab-pane>
      <el-tab-pane label="JIM隐私协议">
        <div class="inner-wrap"></div>
      </el-tab-pane>
    </el-tabs>
    <div class="back-home" @click="handleHome">
      <el-image :src="HomeIcon"/>
    </div>
  </div>
</template>
<script lang="ts">
import {defineComponent, reactive, ref, toRefs} from 'vue';
import UserPolicyView from "/@/views/UserPolicyView.vue";
import DutyPolicyView from "/@/views/DutyPolicyView.vue";
import HomeIcon from "/@/assets/home.svg"
import router from "/@/router";

export default defineComponent({
  name: 'PolicyView',
  components: {UserPolicyView, DutyPolicyView},
  setup() {
    const name = ref("jackieChen");
    const state = reactive({
      bg: 'https://jc-personal.obs.cn-southwest-2.myhuaweicloud.com/public/image/chat/im_bg_7389562736492764357834234.jpg'
    })

    const handleHome = () => {
      router.push("/")
    }
    return {
      name,
      HomeIcon,
      handleHome,
      ...toRefs(state)
    }
  }
})
</script>
<style scoped lang="scss">
.policy-wrap {
  background-color: rgba(255, 255, 255, 0.9);
  height: 100vh;
  position: relative;

  .demo-tabs {
    .inner-wrap {
      height: calc(100vh - 20px);
      overflow-x: hidden;
      overflow-y: auto;
      margin-bottom: 20px;
      padding: 0 20px;
    }
  }

  .back-home {
    position: absolute;
    bottom: 60px;
    left: 20px;
    padding: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--logo-bg-color);
    cursor: pointer;
  }
}
</style>
